<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>三角形</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		div{
			float: left;
		}
		.one{
			width: 0;
			height: 0;
			border-top: 100px solid transparent ;
			border-bottom: 100px solid orange ;
			border-left: 100px solid transparent ;
			border-right: 100px solid transparent ;
		}
		.two{
			width: 0;
			height: 0;
			border: 100px solid transparent;
			border-bottom-color: red;
		}
		.three{
			width: 0;
			height: 0;
			border-top: 40px solid transparent ;
			border-bottom: 100px solid orange ;
			border-left: 80px solid transparent ;
			border-right: 30px solid transparent;
		}
		.box{
			width: 0;
			height: 0;
			border: 100px solid transparent;
			border-bottom-color: blue;
			position: relative;
		}
		.box .san{
			width: 0;
			height: 0;
			border: 92px solid transparent;
			border-bottom-color: #fff;
			position: absolute;
			top: -73px;
			left: -92px;
		}
		.box2{
			width: 0;
			height: 0;
			border: 100px solid transparent;
			border-left-color: orange;
			position: relative;
			margin-left: 200px;
		}
		.box2 .san2{
			width: 0;
			height: 0;
			border: 92px solid transparent;
			border-left-color: #fff;
			position: absolute;
			top: -92px;
			left: -119px;
		}
	</style>
</head>
	 <!-- 三角形主要是由边框撑开，不用给高度
	  transparent  透明--> 
<body>
	<div class="one"></div>
	<div class="two"></div>
	<div class="three"></div>
	<div class="box">
		<div class="san"></div>
	</div>
	<div class="box2">
		<div class="san2"></div>
	</div>
</body>
</html>